<template>
  <Form ref="formRef" :model="formData" :rules="rules" :label-width="120">
    <!-- 基础参数 -->
    <FormItem label="采集频率(分钟)：" prop="rate">
      <InputNumber
        v-model="formData.rate"
        placeholder="请输入采集频率..."
        style="width:100%;"
        :disabled="collectRateDisabeld"
      />
    </FormItem>

    <FormItem label="是否接入零线：" prop="lineToZeroLine">
      <i-switch v-model="formData.lineToZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备显示："
      prop="showZeroLine"
      v-if="!formData.lineToZeroLine"
    >
      <i-switch v-model="formData.showZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备名称："
      prop="childDeviceName"
      v-if="formData.showZeroLine && !formData.lineToZeroLine"
    >
      <Input
        v-model="formData.childDeviceName"
        placeholder="请输入零线设备名称..."
        clearable
      />
    </FormItem>

    <FormItem label="是否启用：" prop="enable">
      <i-switch v-model="formData.enable">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
    <FormItem label="温度开关：" prop="temp">
      <i-switch v-model="formData.temp">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
    <section style="margin-bottom:20px;">
      <editTable
        :columnsList="columnsPipe"
        v-model="tableFourPipe"
        @save="pipeTableSave"
      />
    </section>
  </Form>
</template>
<script>
import { getGatewayList as httpGetGatewayList } from "@/api";
import editTable from "../components/editTable";
import { columnsPipe, fourTablePipe } from "./_utils";
import { isNullObject, generateRules } from "../utils";
export default {
  components: { editTable },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    collectType: String
  },
  // watch: {
  //   form: {
  //     deep: true,
  //     handler(value, oldValue) {
  //       if (!(JSON.stringify(value) === JSON.stringify(oldValue))) {
  //         this.init()
  //       }
  //     }
  //   }
  // },
  mounted() {
    this.init();
  },

  data() {
    return {
      formData: {
        rate: null,
        enable: false,
        deviceParams: [],
        temp: true,
        lineToZeroLine: false,
        showZeroLine: false,
        childDeviceName: ""
      },
      rules: generateRules(),
      columnsPipe: JSON.parse(JSON.stringify(columnsPipe)),
      tableFourPipe: JSON.parse(JSON.stringify(fourTablePipe)),
      collectRateDisabeld: false,
      gatewayPortList: []
    };
  },
  methods: {
    init() {
      if (JSON.stringify(this.form) === "{}") return;

      if (this.collectType === "wang-guan") {
        this.getGatewayTypeList();
      }
    },
    validate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          callback(valid, {
            formData: Object.assign({}, this.form, this.formData)
          });
        }
      });
    },

    getGatewayTypeList() {
      const { collectType, companyId, port } = this.form;
      const params = { desCode: collectType, companyId };
      httpGetGatewayList(params).then(res => {
        const item = res.data.find(t => t.port === port);
        if (item) {
          const rate = item.collectPeriod;
          this.collectRateDisabeld = true;
          this.formData.rate = rate;
        }
      });
    },
    pipeTableSave(data) {
      const deviceParamsArray = [...data],
        deviceParams = isNullObject(deviceParamsArray);
      this.formData.deviceParams = deviceParams;
    }
  }
};
</script>
